<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" type="text/css" href="bootstrap/bootstrap.css" >
</head>
<body>
<div id="box">
    <form role="form">
        <div class="form-group">
            <label for="username">用户名：</label>
            <input type="text" id="username" class="from-control" placeholder="请输入用户名" v-model="username">
        </div>
        <div class="form-group">
            <label for="age">年  龄：</label>
            <input type="text" id="age" class="from-control" placeholder="请输入年龄" v-model="age">
        </div>
        <div class="form-group">
           <input type="button" value="添加" class="btn btn-primary" v-on:click="add()">
            <input type="reset" value="重置" class="btn btn-danger">
        </div>
    </form>

    <hr>
    <table class="table table-bordered table-hover">
        <caption class="h2 text-info">用户信息表</caption>
        <tr class="text-danger">
            <th class="text-center">序号</th>
            <th class="text-center">名字</th>
            <th class="text-center">年龄</th>
            <th class="text-center">操作</th>
        </tr>
        <tr class="text-center" v-for="(item,index) in myData">
            <td>{{index}}</td>
            <td>{{item.name}}</td>
            <td>{{item.age}}</td>
            <td>
                <button class="btn btn-primary" data-toggle="modal" data-target="#layer" v-on:click="nowIndex=index" >删除</button>
            </td>
        </tr>
        <!--<tr class="text-center">-->
            <!--<td>2</td>-->
            <!--<td>snaoid</td>-->
            <!--<td>11</td>-->
            <!--<td>-->
                <!--<button class="btn btn-primary">删除</button>-->
            <!--</td>-->
        <!--</tr>-->
        <tr>
            <td colspan="4" class="text-right" v-show="myData.length!=0">
                <button class="btn btn-danger"> 删除全部</button>
            </td>
        </tr>
        <tr v-show="myData.length==0">
            <td colspan="4" class="text-center text-muted">
                <p>暂无数据...</p>
            </td>
        </tr>
    </table>
    <!--模态框 弹出框-->
    <div role="dialog" class="modal fade" id="layer" data-index="{{nowIndex}}">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal">
                    <span>&times;</span>
                </button>
                <h4 class="modal-title">确认删除吗？</h4>
            </div>
            <div class="modal-body">
                <button class="btn btn-primary" data-dismiss="modal">取消</button>
                <button class="btn btn-danger" data-dismiss="modal" v-on:click="deleteMsg(n)">确定</button>
            </div>
        </div>
    </div>
    </div>
</div>

<script type="text/javascript" src="bootstrap/jquery.js"></script>
<script type="text/javascript" src="bootstrap/bootstrap.js"></script>
<script type="text/javascript" src="vue/vue.js"></script>

<script>
    new Vue({
        el:'#box',
        data:{
            myData:[],
            username:"",
            age:"",
            nowIndeex:""
        },
        methods:{
            add:function () {
                this.myData.push({
                    name:this.username,
                    age:this.age
                })
                this.username='';
                this.age='';
            },
            deleteMsg:function (n) {
                myData.splice("n",1)
            }
        }
    })
</script>

</body>
</html>